// 公共方法
const getElem = function(selector) {
  return document.querySelector(selector);
};
const getAllElem = function(selector) {
  return document.querySelectorAll(selector);
};

// 切换搜索类型
const SwitchSearchType = function() {
  const select = getElem(".search-select");
  const selectList = getElem(".search-select-list");
  const selectItems = getAllElem(".search-select-item");
  select.onclick = function(e) {
    // 阻止冒泡
    e.stopPropagation();
    selectList.style.display = "block";
    getElem("body").onclick = function() {
      selectList.style.display = "none";
    };
  };
  for (let i = 0; i < selectItems.length; i++) {
    selectItems[i].onclick = function(e) {
      e.preventDefault();
      const itemValue = e.target.innerText;
      select.innerText = itemValue;
      selectList.style.display = "none";
    };
  }
};

SwitchSearchType();

// 切换tabs
const switchTab = function(header, content, focusPrefix) {
  const tabs = getAllElem(header);
  const contents = getAllElem(content);
  const prefix = focusPrefix || "";
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].onclick = function(e) {
      e.preventDefault();
      for (let j = 0; j < tabs.length; j++) {
        if (Array.from(tabs[j].classList).indexOf(prefix + "item_focus") > -1) {
          tabs[j].classList.remove(prefix + "item_focus");
          contents[j].style.display = "none";
        }
      }
      this.classList.add(prefix + "item_focus");
      if (i > contents.length) {
        return false;
      }
      contents[i].style.display = "block";
    };
  }
};

switchTab(".content-tab > .caption .item", ".content-wrapper .block .item");

switchTab(".block-caption-item", ".item .block-content", "block-caption-");

// 设置回到顶部的按钮
const backToTop = function() {
  const backToTopElement = getElem(".back-to-top");
  window.onscroll = function() {
    const scrollTop = document.documentElement.scrollTop;
    const windowHeight = document.documentElement.clientHeight;
    if (scrollTop > windowHeight / 2) {
      backToTopElement.style.display = "block";
    } else {
      backToTopElement.style.display = "none";
    }
  };
  backToTopElement.addEventListener("click", function() {
    document.documentElement.scrollTop = 0;
  });
};

backToTop();

// 设置轮播图
const setSliderBanner = function() {
  // 获取元素
  const slider = getElem(".banner-slider");
  const wrapper = getElem(".slider-wrapper");
  const banners = getAllElem(".slider-item");
  const btnPrev = getElem(".slider-arrow .left");
  const btnNext = getElem(".slider-arrow .right");
  const dots = getAllElem(".dot-item");
  // 当前图片页的索引
  let pageIndex = 0;
  // 图片宽度
  const WIDTH = -544;
  // 图片总数
  const len = banners.length;

  // 向上翻页
  const movePrev = function(e) {
    e.preventDefault();
    wrapper.style.left = WIDTH * (len - 1 - pageIndex) + "px";
    pageIndex += 1;
    if (pageIndex === len) {
      wrapper.style.left = 0;
      pageIndex = 0;
    }
    const index = pageIndex === 0 ? 0 : len - pageIndex;
    setDotActive(index);
  };

  // 向下翻页
  const moveNext = function(e) {
    if (e) {
      e.preventDefault();
    }
    wrapper.style.left = WIDTH * (pageIndex + 1) + "px";
    pageIndex += 1;
    if (pageIndex === len) {
      wrapper.style.left = 0;
      pageIndex = 0;
    }
    setDotActive(pageIndex);
  };

  // 设置圆点的活动状态
  const setDotActive = function(idx) {
    for (let i = 0; i < dots.length; i++) {
      if (Array.from(dots[i].classList).indexOf("dot-item_focus") > -1) {
        dots[i].classList.remove("dot-item_focus");
      }
    }
    dots[idx].classList.add("dot-item_focus");
  };

  // 自动滑动
  const autoMove = function() {
    createTimer();
  };

  let timer;

  // 生产定时器
  const createTimer = function() {
    timer = setInterval(function() {
      moveNext();
    }, 3000);
  };

  // 关闭定时器
  const closeTimer = function() {
    clearInterval(timer);
  };

  // 点击按钮切换图片向前向后滑动
  btnPrev.addEventListener("click", movePrev);
  btnNext.addEventListener("click", moveNext);

  // 点击圆点切换到对应的图片
  for (let i = 0; i < dots.length; i++) {
    dots[i].addEventListener("click", function(e) {
      e.preventDefault();
      wrapper.style.left = WIDTH * i + "px";
      setDotActive(i);
    });
  }

  // 自动滑动
  autoMove();

  // 鼠标进入slider区域后停止自动滑动，离开后继续自动滑动
  slider.addEventListener("mouseover", closeTimer);
  slider.addEventListener("mouseout", createTimer);
};
setSliderBanner();

// 快速预约(多级联动菜单)
const setAppointment = function() {};
setAppointment();
